<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv ="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/waves.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <!--页面公共样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--页面样式-->
    <link rel="stylesheet" href="css/page.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    <!--jquery必须放head，后续js需要使用-->
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/waves.min.js"></script>
    <script src="js/lc_switch.js"></script>
    <script src="js/rangeslider.min.js"></script>
    <script src="js/txtscroll.js"></script>
    <!--页面js必须放head里，防止页面抖动-->
    <script src="js/common.js"></script>
    <script src="js/top.js"></script>
    <script src="js/classControll.js"></script>

</head>
<body>
<div class="fullbg">

</div>

<header>
    <!--登录后的头-->
    <div class="login-header">
        <div class="space-info ">
            <div class="addtress"><span>四川大学</span> <span>J17A101教室</span></div>
            <div class="username">张复兴</div>
        </div>
        <div class="status">
            <div class="live-status"></div>
            <div class="net-status"></div>
        </div>
        <div class="time-note">
            <div class="top-time">
                15:13
            </div>
            <!--<div class="top-note" id="s1">-->
            <!--<ul>-->

            <!--</ul>-->
            <!--</div>-->
            <div class="txt-scroll txt-scroll-curs top-note"  id="s1">
                <div class="scrollbox">
                    <div class="txt">

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--未登录的头-->
    <div class="unlogin-header">
        <div class="space-info">
            <div class="username">暂未登录</div>
        </div>
        <div class="status">
            <div class="live-status">暂无直播</div>
            <div class="net-status">物联网关闭</div>
        </div>
        <div class="time-note">
            <div class="top-time">

            </div>
        </div>
    </div>
</header>

    <!--<div class="wrap-main">-->

        <!--<section class="wrap-content">-->
            <main class="class-controll">
                <section class="media-edu">
                    <h3 class="title">
                        <div class="top-bar"></div>
                        <span>本地控制</span>
                        <div class="bottom-bar"></div>
                    </h3>
                    <div class="mid-pannel-content class-controll-left">
                        <ul>
                            <li class="controll-mode">
                                <p>控制模式</p>
                                <p class="on-off">
                                    <a href="javascript:void(0)" class="class-actived">上课</a>
                                    <a href="javascript:void(0)">下课</a>
                                    <a href="javascript:void(0)" >自习</a>
                                    <a href="javascript:void(0)">放学</a>
                                </p>
                            </li>
                            <li class="new-wind">
                                <p>新风系统</p>
                                <div class="bottom-content">
                                    <div class="bottom-left-content">
                                        <p>
                                            <span class="new-wind-title">PM2.5</span>
                                            <span class="new-wind-content">53μg/m3</span>
                                        </p>
                                        <p>
                                            <span class="new-wind-title">二氧化碳</span>
                                            <span class="new-wind-content"> 0.2%</span>
                                        </p>
                                        <p>
                                            <span class="new-wind-title"> PM10</span>
                                            <span class="new-wind-content"> 50μg/m3</span>
                                        </p>
                                    </div>
                                    <div class="bottom-right-content">
                                        <div class="lcs_wrap">
                                            <input type="checkbox" value="4" class="lcs_check" id="new-wind-switch" autocomplete="off">
                                            <div class="lcs_switch lcs_checkbox_switch lcs_off">
                                                <div class="lcs_cursor"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="controller">
                                <div class="top-content">
                                    <div>空调</div>
                                    <div class="on-off">
                                        <a href="javascript:void(0)" class="reduce-btn"><img src="images/btn/btn_reduce.png" alt=""></a>
                                        <span> 28</span>℃
                                        <a href="javascript:void(0)" class="add-btn"><img src="images/btn/btn_add.png" alt=""></a>
                                    </div>
                                </div>
                                <div class="bottom-content">
                                    <div class="bottom-left-content">
                                        <span class="air-btn"><img src="images/icon/btn_Airconditioner_Fogremoval.png" alt=""></span>
                                        <span class="hot-btn"><img src="images/icon/btn_Airconditioner_hot.png" alt=""></span>
                                        <span class="cold-btn"><img src="images/icon/btn_Airconditioner_cold.png" alt=""></span>
                                    </div>
                                    <div class="bottom-right-content">
                                        <div class="lcs_wrap">
                                            <input type="checkbox" value="4" class="lcs_check" status="unchecked" id="controller-switch" autocomplete="off">
                                            <div class="lcs_switch lcs_checkbox_switch lcs_off">
                                                <div class="lcs_cursor"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="lighting">
                                <div class="top-content">
                                    <div>照明</div>
                                </div>
                                <div class="bottom-content">
                                    <p>
                                        <img src="images/icon/icon_lighting.png" class="voice-icon">
                                    </p>
                                    <div class="voice-controll">
                                        <input type="range" min="0" max="100" data-rangeslider="" class="light">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </section>

                <section class="mid-pannel-wrap class-controll-mid">
                    <div class="right-pannel-content">
                        <ul>
                            <li class="voice">
                                <p>音量大小</p>
                                <p class="on-off voice-on">
                                    <img src="images/icon/btn_voice_open.png" class="voice-icon">
                                </p>
                                <p class="on-off voice-off">
                                    <img src="images/icon/btn_voice_close.png" class="voice-icon">
                                </p>
                                <div class="voice-controll">
                                    <input type="range" min="0" max="100" data-rangeslider="" class="voice-range">
                                </div>
                            </li>
                            <li class="door-switch">
                                <p>门禁开关</p>
                                <p class="on-off">
                                    <img class="left-icon" src="images/icon/door-switch-icon.png" alt="">
                                    <!--<img class="onoff-btn" src="images/btn/btn_switch_open.png" alt="">-->
                                <div class="lcs_wrap">
                                    <input type="checkbox" value="4" class="lcs_check" id="door-switch" autocomplete="off">
                                    <div class="lcs_switch lcs_checkbox_switch lcs_off">
                                        <div class="lcs_cursor bac-purple"></div>
                                    </div>

                                </div>
                                </p>
                            </li>
                            <li class="camera">
                                <p>投影仪</p>
                                <p class="on-off">
                                    <img class="left-icon" src="images/icon/icon_camera.png" alt="">
                                <div class="lcs_wrap">
                                    <input type="checkbox" name="check-1" value="4" class="lcs_check" id="camera-switch" autocomplete="off">
                                    <div class="lcs_switch  lcs_checkbox_switch lcs_off">
                                        <div class="lcs_cursor bac-orange"></div>
                                    </div>

                                </div>
                                </p>
                            </li>
                            <li class="curtains">
                                <p>窗帘</p>
                                <p class="on-off">
                                    <img class="left-icon" src="images/icon/icon_curtains.png" alt="">
                                <div class="lcs_wrap">
                                    <input type="checkbox" name="check-1" value="4" class="curtains-switch" id="curtains-switch" autocomplete="off">
                                    <div class="lcs_switch  lcs_checkbox_switch lcs_off">
                                        <div class="lcs_cursor bac-green"></div>
                                    </div>

                                </div>
                                </p>
                            </li>
                            <li class="centralizedcontrol">
                                <p>集控播放</p>
                                <p class="on-off">
                                    <img class="left-icon" src="images/icon/icon_Centralizedcontrol.png" alt="">
                                <div class="lcs_wrap">
                                    <input type="checkbox" name="check-1" value="4" class="lcs_check" id="centralizedcontrol-switch" autocomplete="off">
                                    <div class="lcs_switch  lcs_checkbox_switch lcs_off">
                                        <div class="lcs_cursor bac-light-purple"></div>
                                    </div>

                                </div>
                                </p>
                            </li>
                            <li class="accesscontrol">
                                <p>人体红外</p>
                                <p class="on-off">
                                    <img class="left-icon" src="images/icon/icon_Accesscontrol.png" alt="">
                                <div class="lcs_wrap">
                                    <input type="checkbox" name="check-1" value="4" class="lcs_check" id="accesscontrol-switch" autocomplete="off">
                                    <div class="lcs_switch  lcs_checkbox_switch lcs_off">
                                        <div class="lcs_cursor bac-pink"></div>
                                    </div>

                                </div>
                                </p>
                            </li>

                        </ul>
                    </div>

                </section>
                <section class="right-pannel-wrap">
                    <section class="right-pannel">
                        <h3 class="title">
                            <div class="short-top-bar"></div>
                            <span>外部控制权限</span>
                            <div class="short-bottom-bar"></div>
                        </h3>
                        <div class="right-pannel-content class-controll-right">
                            <ul>
                                <li class="net">
                                    <p>物联网</p>
                                    <p class="on-off">
                                        <img class="left-icon" src="images/icon/icon_Internetofthings.png" alt="">
                                    <div class="lcs_wrap">
                                        <input type="checkbox" name="check-1" value="4" class="lcs_check" id="net-swicth" autocomplete="off">
                                        <div class="lcs_switch  lcs_checkbox_switch lcs_off">
                                            <div class="lcs_cursor bac-light-green"></div>
                                        </div>
                                    </div>
                                    </p>
                                </li>
                                <li class="school-living">
                                    <p>校内直播中</p>
                                    <p class="on-off">
                                        <img class="left-icon" src="images/icon/icon_Livebroadcastoncampus.png" alt="">
                                        <!--<img class="onoff-btn" src="images/btn/btn_switch_open.png" alt="">-->
                                    <div class="lcs_wrap">
                                        <input type="checkbox" value="4" class="lcs_check" id="school-living-swicth" autocomplete="off">
                                        <div class="lcs_switch lcs_checkbox_switch lcs_off">
                                            <div class="lcs_cursor deep-blue"></div>
                                        </div>
                                    </div>
                                    </p>
                                </li>

                            </ul>
                        </div>
                    </section>
                </section>

            </main>


        <footer>
            <ul>
                <li><a href="mediaTeach.html" >多媒体教学</a></li>
                <li><a href="schollClass.html">在线听课</a></li>
                <li><a href="mylives.html">我的课堂</a></li>
                <li><a href="classControll.html" class="actived-btn">教室控制</a></li>
            </ul>
        </footer>

        <!--</section>-->
				<!-- <div><button class="normal-btn">按钮</button></div> -->
    <!--</div>-->
<div class="btn-group">
    <ul>
        <li class="home">
            <a href="newindex.html"><div><img src="images/btn/btn_backindex.png" alt=""></div>首页</a>
        </li>
        <li class="scan-code">
            <a href="javascript:void(0)">  <div><img src="images/btn/btn_Sweepcode.png" alt=""></div>扫码控制</a>
            <p class="show-code"><img src="images/icon/code.png" alt=""></p>
        </li>
        <li class="switch">
            <a href="javascript:void(0)">  <div><img src="images/btn/btn_switch.png" alt=""></div>电源</a>
        </li>
    </ul>
</div>


</body>
</html>
